/*
 * @Author: 曹澳龙
 * @Date: 2023-08-02 11:58:10
 * @LastEditTime: 2023-08-02 11:58:10
 * @LastEditors: 曹澳龙
 * @Description:
 *
 */

import {Component} from "react";
import PropTypes from "prop-types";
import {nanoid} from "nanoid";
import "./index.css";

class Header extends Component<any, any> {

    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }

    handleKeyUp = (e: any) => {
        const {keyCode, target} = e;
        if (keyCode === 13) {
            let value = target.value;
            if (value === null || value === '')
                return;

            this.props.addTodo({
                id: nanoid(),
                name: value,
                done: false
            });

            target.value = '';
        }
    }

    render() {
        return (
            <div className ="todo-header">
                <input
                    type="text"
                    placeholder="请输入你的任务名称，按回车键确认"
                    onKeyUp={this.handleKeyUp}
                />
            </div>
        )
    }
}

export default Header;